<template>
  <div class="forgetWrap">
    <div class="loginWrap1" v-if="regeister">
      <img src="../../../static/images/loginWrap.png" alt="">
      <div class="outSide">
        <div class="outsideBox">
          <p class="p1">手机号验证</p>
          <div class="loginArea">
            <form action="">
              <div class="loginInput">
                <input type="text"
                       placeholder="输入手机号"
                       id="telPhoneCheck"
                       @focus="hideTips"
                       @blur="checkTel"
                       ref="telPhoneCheck">
                <p class="errorTips animated shake" v-if="telError"  ref="errorTips" id="errorTips">手机格式错误</p>
              </div>
              <div class="logincode">
                <input type="text" placeholder="输入图形验证码" v-model="picCode">
                <img :src=src alt="" class="codeArea" ref="codeArea" @click.stop="changeCode">
              </div>
              <div class="logincode">
                <input type="text" placeholder="输入短信验证码" v-model="msgCode">
                <input type="button"  @click.stop="getCode" class="getCode" :disabled="disabled" v-model="resendValue">
              </div>
              <div class="loginBtn">
                <input type="button" value="下一步" id="nextStep" @click.stop="nextStep">
              </div>
            </form>
          </div>
        </div>
        <div class="center">
        </div>
      </div>
    </div>
    <div class="loginWrap" v-if="!regeister">
      <img src="../../../static/images/loginWrap.png" alt="">
      <div class="outSide">
        <div class="outsideBox">
          <p class="p1">重置密码</p>
          <div class="loginArea">
            <!--<form action="">-->
              <div class="loginInput">
                <input type="password" placeholder="输入密码" ref="resetPassword1" >
                <!--<span class="eyes"></span>-->
              </div>
              <div class="loginInput">
                <input type="password" placeholder="请再次确认密码"  ref="resetPassword2">
                <!--<span class="eyes"></span>-->
              </div>
              <div class="loginBtn">
                <input type="button" value="确定" id="finished" @click.stop="finishReset" />
              </div>
            <!--</form>-->
          </div>
        </div>
        <div class="center">

        </div>
      </div>
    </div>
    <Alarm :alarm="alarm" v-if="showAlarm" @cancel="cancel" @confirm="confirm"></Alarm>
  </div>
</template>
<script>
  import Alarm from '../../components/alarm.vue'
  export default({
    data(){
      return {
        regeister:true,
        telError:false,
        disabled:false,
        timer:null,
        resendValue:'获取验证码',
        count:59,
        picCode:'',
        msgCode:'',
        showeyes1:false,
        showeyes2:false,
        alarm:'',
        showAlarm:false,
        messageData:'',
        codeUrl:'',
        randomArray:'',
        options:[],
        src:'',
        userTel:'',
        showSuccess:false,

      }
    },
    components:{
      Alarm:Alarm
    },
    computed:{

    },
    methods:{
      changeCode(){
        this.initCode()
      },
      cancel(){
        this.showAlarm =false
      },
      confirm(){
        this.showAlarm =false
      },
      finishReset(){
          let that =this
        if(!this.$refs.resetPassword1.value&&!this.$refs.resetPassword2.value){
          this.alarm= '请完善密码信息'
          this.showAlarm =true
          return false
        }
        if(this.$refs.resetPassword1.value !=this.$refs.resetPassword2.value){
          this.alarm= '两次输入的密码不一致'
          this.showAlarm =true
          return false
        }
        this.axios.post('/home/Login/modifyPass?'+`${this.baseUrl}`,{
          tel:that.userTel,
          pass:that.$refs.resetPassword1.value,
          pass1:that.$refs.resetPassword2.value
        })
          .then((res) =>{
//            console.log(res)
            if(res.data.code==1){
            //修改密码成功
              this.alarm= res.data.msg
              this.showAlarm =true
              setTimeout(()=>{
                  that.$router.push({
                    name:'loginPage'
                  })
              },2000)
            }else{
            //修改失败
              this.alarm= res.data.msg
              this.showAlarm =true
            }
          })
      },
//      navToLogin(){
//        this.$router.push('/')
//      },
      nextStep(){
        if(this.checkTel() &&this.picCode&&this.msgCode){
          this.userTel =this.$refs.telPhoneCheck.value
          this.axios.post( '/home/login/register?'+`${this.baseUrl}`,{
            tel:this.$refs.telPhoneCheck.value,
            code:this.msgCode,
            captcha:this.picCode,
            id:this.randomArray,
            type:1
          })
            .then((res)=>{
//              console.log(res)
              if(res.data.code==1){
                  //已注册
                 this.regeister=false
              }
              else if(res.data.code==5){
                //未注册
                this.$router.push({
                  path:'/regeister',
                  params:{
                      regeister:true
                  }
                })
              }
              else{
                this.alarm=res.data.msg
                this.showAlarm =true
              }
            })
        }else{
          this.alarm='请核实相关信息'
          this.showAlarm =true
        }
      },
      showEyes1(e){
        if(e.keyCode===8){
        }else{
          this.showeyes1 =true
        }
      },
      togglePassword1(){
        if(this.$refs.fillphone1.type==='password'){
          this.$refs.fillphone1.type='text'
        }else if (this.$refs.fillphone1.type==='text'){
          this.$refs.fillphone1.type='password'
        }
      },
      showEyes2(e){
        if(e.keyCode===8){
        }else{
          this.showeyes2 =true
        }
      },
      togglePassword2(){
        if(this.$refs.fillphone2.type==='password'){
          this.$refs.fillphone2.type='text'
        }else if (this.$refs.fillphone2.type==='text'){
          this.$refs.fillphone2.type='password'
        }
      },
      checkTel(){
        var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
        if( !reg2.test(this.$refs.telPhoneCheck.value) ){
          this.telError =true
          return false;
        }
        return true
      },
      hideTips(){
        this.telError =false
      },
      getCode(){
        if(this.checkTel()){
          let that =this
          this.disabled=true
          this.resendValue='59s后重发'
          this.startCount()
          this.axios.get('/home/Login/sendMsg?'+`${this.baseUrl}`,{
            params:{
              tel:that.$refs.telPhoneCheck.value
            }
          }).then((res)=>{
//            console.log(res)
//            console.log(res.data.code)
            if(res.data.code==1){
              this.messageData =res.data.data.randStr
            }else{
              this.alarm=res.data.msg
              this.showAlarm =true
            }
          })
            .catch((res)=>{
              this.alarm=res.data.msg
              this.showAlarm =true
            })
        }else{
          this.telError =true
        }
      },
      startCount(){
        let that =this
        this.timer =setInterval((res=>{
          that.count --
          that.resendValue =that.count+'s后重发'
          if(that.count===0){
            that.resendValue='获取验证码'
            clearInterval(that.timer)
            that.disabled =false
            that.count =59
          }
        }),1000)
      },
      getRandom(){
        this.randomArray =''
        var array =['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
        for(var i=0;i<4;i++){
          this.randomArray+= array[parseInt(Math.random()*array.length)]
        }
        return (this.randomArray)
      },

      initCode(){
        let that =this
        this.axios.get('/home/Login/create?'+`${this.baseUrl}`,{
          params:{
            id:that.getRandom()
          }
        }).then((res)=>{
          this.src=res.request.responseURL
        })
      }
    },
    mounted(){
      this.initCode()

    },
    created(){

    }
  })
</script>
<style scoped>
  .loginWrap{
    background: #fcfcfd;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .outSide {
    text-align: center;
    font-size: .34rem;
    color: #333;
    position: absolute;
    left: 0rem;
    top: 1.2rem;
    width: 6.5rem;
    margin: 0 0.5rem;
    background: white;
    height: 8.14rem;
    background: transparent;
  }

  .outsideBox {
    position: absolute;
    left: 0rem;
    top: 0;
    width: 6.50rem;
    height: 8rem;
    background: white;
    border-radius: .16rem;
    box-shadow: 0 5px 5px #fce2e3;
    z-index: 3;
  }

  .outsideBox p {
    text-align: justify;
    padding: 0 0rem;
    color: #61a2ff;
    font-size: 0.22rem;
  }
  .forgetPassword{
    color: #61a2ff;
    font-size: 0.22rem;
  }
  .outsideBox .p1 {
    text-align: center;
    padding-top: 0.9rem;
    font-weight: bold;
    padding-bottom: .35rem;
    color: #333;
    font-size: .32rem;
    letter-spacing: 0.05rem;
  }

  .outsideBox .p2 {
    padding-bottom: .50rem;
  }

  .center {
    position: absolute;
    top: 0;
    left: .25rem;
    width: 6rem;
    bottom: 0rem;
    height: 8.30rem;
    background: white;
    border-radius: .12rem;
    box-shadow: 0 5px 5px #fce2e3;
    z-index: 2;
  }
  .loginArea{
    width: 5.2rem;
    margin: 0 auto;
  }
  .loginInput input{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height:0.8rem;
    border-radius:0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    border: 0.02rem solid #f4f4f5;
  }
  .passwordArea{
    margin-top:0.58rem;
    margin-bottom: 0.3rem;
    overflow: hidden;
  }
  .weui-cell{
    padding: 0;
  }
  .passwordArea .weui-check__label{
    float: left;
    height: 0.58rem;
  }
  .passwordArea .forgetPassword{
    float: right;
    height: 0.58rem;
    line-height: 0.58rem;

  }
  .loginInput{
    margin-top: 0.4rem;
    position: relative;
  }
  .logincode{
    margin-top: 0.4rem;
    overflow: hidden;
  }
  .loginInput input{
    background: #fafafa;
  }

  ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
    font-size: 0.3rem;
  }
  .loginInput .errorTips{
    position: absolute;
    right: 0.6rem;
    top:0;
    height: 100%;
    padding-right: 0.6rem;
    background-image: url("../../../static/images/errorTips.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.3rem 0.3rem;
    font-size:0.24rem;
    color: #e83328;
    line-height: 0.8rem;
    display: none;
  }
  .loginInput .eyes{
    position: absolute;
    right: 0.3rem;
    top:0;
    height: 100%;
    width: 0.68rem;
    background-image: url("../../../static/images/eyes2.png");
    background-size: 0.38rem 0.24rem;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
  }
  .loginBtn{
    width: 100%;
    height: 0.7rem;
    margin-top: 1.3rem;
  }
  .loginBtn input{
    width: 100%;
    text-align: center;
    line-height: 0.7rem;
    font-size:0.34rem;
    color: #ffffff;
    border: none;
    outline: none;
    background: linear-gradient(to right, #f84342 0%, #e83126 100%);
    border-radius: 0.12rem;
  }

  .loginArea input{

  }
  .loginTips {
    text-align: center;
    font-size: 0.24rem;
    color: white;
    margin-top: 0.2rem;

  }

  @-webkit-keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .logincode input{
    width: 3.4rem;
    background: #fafafa;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height: 0.8rem;
    border-radius: 0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    border: 0.02rem solid #f4f4f5;
    float: left;
  }
  .logincode .codeArea{
    float: right;
    width: 1.6rem;
    height: 0.8rem;
    background: #dcdcdc;
    font-size: 0.22rem;
    line-height: 0.8rem;
    background-image: url("../../../static/images/codeCover.jpg");
    background-repeat: no-repeat;
    background-size: 1.6rem 0.8rem;
  }
  .logincode .codeArea  div img{
    display: block;
    width: 1.6rem;
    height: 0.8rem;
  }
  .logincode .getCode{
    float: right;
    width: 1.6rem;
    height: 0.8rem;
    background: linear-gradient(to right, #f84342 0%, #e83126 100%);
    font-size: 0.22rem;
    line-height: 0.8rem;
    color: white;
    border-radius: 0.13rem;
    border:none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    padding-left: 0;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;
    font-size: 0.3rem;
  }
</style>
